<template>
    <div class="container">
        <HeaderBar />
        <div class="container_main">
            <div class="title">
                地址管理
                <div class="title_add" @click="add">添加地址</div>
            </div>
            <div class="list">
                <div
                    class="list_item"
                    v-for="item in list"
                    :key="item.id"
                    @click="chooseAddress(item)"
                >
                    <div class="list_item_address">{{item.areaName}}{{item.address}}</div>
                    <div class="list_item_name">{{item.linkerName}}&nbsp;{{item.phone}}</div>
                    <img
                        src="../../assets/images/user/edit.png"
                        class="list_item_edit"
                        @click="edit(item.id, $event)"
                    />
                    <img
                        src="../../assets/images/user/delete.png"
                        class="list_item_delete"
                        @click="deleteItem(item.id, $event)"
                    />
                </div>
            </div>
        </div>
        <el-dialog
            :visible.sync="modal"
            :title="title"
            width="680px"
            :destroyOnClose="destroyOnClose"
        >
            <div class="userInfo">
                <input
                    type="text"
                    class="userInfo-value"
                    placeholder="收货人姓名"
                    autocomplete="false"
                    v-model="addressInfo.linkerName"
                />
                <input
                    type="text"
                    class="userInfo-value"
                    placeholder="收货人手机号"
                    v-model="addressInfo.phone"
                />
                <div class="userInfo-control">
                    <el-row>
                        <el-col :span="8">
                            <el-select
                                v-model="provinceId"
                                style="width:95%"
                                @change="changeProvince()"
                            >
                                <el-option
                                    v-for="item in province"
                                    :value="item.id"
                                    :key="item.id"
                                    :label="item.name"
                                >
                                </el-option>
                            </el-select>
                        </el-col>
                        <el-col :span="8">
                            <el-select
                                v-model="cityId"
                                style="width:95%"
                                :disabled="!provinceId"
                                @change="changeCity"
                            >
                                <el-option
                                    v-for="item in city"
                                    :value="item.id"
                                    :key="item.id"
                                    :label="item.name"
                                >
                                </el-option>
                            </el-select>
                        </el-col>
                        <el-col :span="8">
                            <el-select
                                v-model="areaId"
                                style="width:95%"
                                :disabled="!cityId"
                            >
                                <el-option
                                    v-for="item in area"
                                    :value="item.id"
                                    :key="item.id"
                                    :label="item.name"
                                >
                                </el-option>
                            </el-select>
                        </el-col>
                    </el-row>
                </div>
                <textarea
                    class="userInfo-detail"
                    placeholder="详细地址"
                    v-model="addressInfo.address"
                />
            </div>
            <div slot="footer" class="dialog-footer">
                <el-button @click="cancel()">取 消</el-button>
                <el-button type="primary" @click="submit()">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script>
import HeaderBar from '@components/HeaderBar';
import {
    GetAddressList,
    getAddressDetail,
    PostAddressDelete,
    PostAddressSave,
    GetAddress
} from '@api/api';
export default {
    data() {
        return {
            destroyOnClose: true,
            type: '',
            modal: false,
            contory: '',
            prinvice: '',
            city: '',
            cityList: [],
            list: [],
            title: '新增收货地址',
            addressInfo: {
                address: '',
                phone: '',
                linkerName: '',
                areaId: null,
                cityId: '',
                provinceId: ''
            },
            province: [],
            provinceId: '',
            city: [],
            cityId: '',
            area: [],
            areaId: '',
            from: '',
            localAddress: {}
        }
    },
    components: {
        HeaderBar,
    },
    created () {
        let {
            from
        } = this.$route.query;
        this.from = from || '';
        this.getList();
        this.getAreaList(1, 'province');
        let address = {};
        if (localStorage.getItem('address')) {
            address = JSON.parse(localStorage.getItem('address'));
            console.log('address', address);
        }
        this.localAddress = address;
    },
    methods: {
        getList() {
            GetAddressList()
                .then(res=>{
                    this.list = res.data;
                });
        },
        add() {
            delete this.addressInfo.id;
            this.title = '新增收货地址';
            this.modal = true;
        },
        cancel() {
            this.modal = false;
            this. addressInfo ={
                address: '',
                phone: '',
                linkerName: '',
                areaId: null,
                cityId: '',
                provinceId: ''
            };
            this.provinceId = null;
            this.cityId = null;
            this.areaId = null;
        },
        submit() {
            let {
                addressInfo,
                areaId,
                localAddress
            } = this;
            addressInfo.areaId = areaId;
            let _this = this;
            PostAddressSave(addressInfo)
                .then(res=>{
                    console.log('res', res);
                    if (localAddress.id && localAddress.id == addressInfo.id) {
                        localStorage.removeItem('address');
                        localStorage.setItem('address', JSON.stringify(addressInfo))
                    }
                    _this.$message({
                        message: '操作成功!',
                        type: 'success'
                    });
                    _this.modal = false;
                    _this.getList();
                    _this. addressInfo ={
                        address: '',
                        phone: '',
                        linkerName: '',
                        areaId: null,
                        cityId: '',
                        provinceId: ''
                    };
                    _this.provinceId = null;
                    _this.cityId = null;
                    _this.areaId = null;
                });
        },
        edit(id, e) {
            e.stopPropagation();
            this.addressInfo.id = id;
            getAddressDetail({id: id})
                .then(res=>{
                    this.addressInfo = res.data;
                    this.provinceId = res.data.provinceId;
                    this.cityId = res.data.cityId;
                    this.areaId = res.data.areaId;
                    if (res.data.provinceId) {
                        this.getAreaList(res.data.provinceId, 'city');
                    }
                    if (res.data.cityId) {
                        this.getAreaList(res.data.cityId, 'area');
                    }
                    this.title = '编辑收货地址';
                    this.modal = true;
                })
        },
        deleteItem(id, e) {
            e.stopPropagation();
            this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                PostAddressDelete({id: id})
                    .then(res=>{
                        this.$message({
                            type: 'success',
                            message: '删除成功!'
                        });
                        this.getList();
                    });
            }).catch(() => {
            });
        },
        getAreaList(id, type) {
            console.log('type', type)
            console.log('id', id)
            let params = {
                pid: id
            }
            GetAddress(params)
                .then(res=> {
                    this[type] = res.data;
                });
        },
        chooseAddress(obj) {
            let {
                from
            } = this;
            if (!from) {
                return false;
            }
            localStorage.removeItem('address');
            localStorage.setItem('address', JSON.stringify(obj));
            this.$router.go(-1);
        },
        changeProvince() {
            console.log('provinceId', this.provinceId);
            if (this.provinceId != this.addressInfo.provinceId) {
                this.city = [];
                this.cityId = null;
                this.area = [];
                this.areaId = null;
            }
            this.addressInfo.provinceId = this.provinceId;
            this.getAreaList(this.provinceId, 'city');
        },
        changeCity() {
            if (this.cityId != this.addressInfo.cityId) {
                this.area = [];
                this.areaId = null;
            }
            this.addressInfo.cityId = this.cityId;
            this.getAreaList(this.cityId, 'area');
        }
    },
}
</script>
<style>
body {
    background: #ffffff;
}
.ivu-modal-body {
    padding: 0;
}
.ivu-select-single .ivu-select-selection {
    height: 50px;
}
.ivu-select-single .ivu-select-selection .ivu-select-placeholder, .ivu-select-single .ivu-select-selection .ivu-select-selected-value {
    height: 50px;
    line-height: 50px;
}
</style>
<style>
.el-dialog__body {
    padding: 0;
}
</style>
<style scoped>
.title {
    margin-top: 45px;
    display: flex;
    align-items: center;
    margin-bottom: 35px;
    font-size: 24px;
    font-family: PingFang SC;
    font-weight: 400;
    color: #000000;
}
.title_add {
    width: 100px;
    text-align: center;
    height: 40px;
    line-height: 40px;
    background: #1D242D;
    border-radius: 20px;
    margin-left: 28px;
    font-size: 14px;
    font-family: PingFang SC;
    font-weight: 400;
    color: #D0B990;
    cursor: pointer;
}
.list_item {
    height: 140px;
    background: #F7F7F7;
    position: relative;
    padding: 40px 0 38px 49px;
    margin-bottom: 40px;
    box-sizing: border-box;
}
.list_item_address {
    height: 18px;
    font-size: 18px;
    font-family: PingFang SC;
    font-weight: 400;
    color: #1D242D;
    margin-bottom: 26px;
}
.list_item_name {
    height: 18px;
    font-size: 18px;
    font-family: PingFang SC;
    font-weight: 400;
    color: #8A8C92;
}
.list_item_edit {
    width: 26px;
    height: 27px;
    position: absolute;
    top: 57px;
    right: 114px;
    cursor: pointer;
}
.list_item_delete {
    width: 26px;
    height: 27px;
    position: absolute;
    top: 57px;
    right: 48px;
    cursor: pointer;
}
.userInfo {
    padding: 29px 40px;
}
.userInfo-value {
    width: 600px;
    height: 50px;
    background: #FFFFFF;
    border: 1px solid #C4C5CB;
    border-radius: 4px;
    margin-bottom: 24px;
    padding-left: 20px;
    font-size: 14px;
    font-family: PingFang SC;
    font-weight: 400;
    color: #333;
    box-sizing: border-box;
}
.userInfo-value::placeholder {
    color: #AFB1B9;
}
.userInfo-control {
    margin-bottom: 24px;
}
.userInfo-detail {
    width: 600px;
    height: 100px;
    background: #FFFFFF;
    border: 1px solid #C4C5CB;
    border-radius: 4px;
    box-sizing: border-box;
    padding: 24px 20px;
    font-size: 14px;
    font-family: PingFang SC;
    font-weight: 400;
    color: #333;
    outline: none;
}
.userInfo-detail::placeholder {
    color: #AFB1B9;
}
</style>